<template>
  <div class="not_found_view">
    <div class="not_found_view_box">
      <img src="../../assets/images/NotFound.jpg">
      <h3>
        将在{{time}}秒后<span @click="toPage">返回便签列表</span>
      </h3>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NotFound',
  data () {
    return {
      time: 5,
      countDownInterval: null
    }
  },
  methods:{
    countDown(){
      this.countDownInterval = setInterval(()=>{
        if (this.time-- <= 1) {
          clearInterval(this.countDownInterval)
          this.toPage()
        }
      },1000)
    },
    toPage(){
      this.$router.push('/')
    }
  },
  destroyed(){
    clearInterval(this.countDownInterval)
  },
  created() {
    this.countDown()
  }
}
</script>

<style scoped lang="less">
.not_found_view{
  width:100%;
  height:100%;
  position: relative;
  background-color: #F7F8FA;
  .not_found_view_box{
    width: 50%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    img{
      width: 100%;
    }
    h3{
      span{
        color: #008cf0;
      }
    }
  }
}
</style>
